<!--
 * @Descripttion: 库存查询列表
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-11 20:30:34
 -->
<template>
  <div class="app-container">
    <Tab
      v-model="currentIndex"
      :texts="['全部']"
      @on-date-change="onTabDateChange"
    >
      <div class="fr">
        <el-button>导出</el-button>
        <el-button type="primary" @click="btnAddData">新增收款</el-button>
      </div>
    </Tab>
    <div class="border-gay padding10 clearfix">
      账单周期：{{ billRange }}
    </div>
    <Total ref="total" :data="statisticsData" />
    <div class="margin-t20">
      <el-card shadow="never" class="oper-btn-card">
        <div class="clearfix">
          <div class="fr">
            <span>客户分类:</span>
            <CustomerCatTreeSelect v-model="searchData.cat" class="w150" />
            <el-checkbox
              v-model="searchData.isShowNoDebt"
              style="margin-right:0px;"
              true-label="0"
              false-label="1"
              border
            >不显示无欠款客户</el-checkbox>
            <el-checkbox
              v-model="searchData.isShowDeactivate"
              true-label="0"
              false-label="1"
              border
            >不显示停用款客户</el-checkbox>
            <el-input
              v-model="searchData.keywords"
              class="w200"
              clearable
              placeholder="搜索编号,客户名称,联系人,电话..."
              @keydown.enter.native="() => {listData()}"
            />
            <el-button type="primary" :loading="btnLoading.search" @click="btnSearchData">查询</el-button>
          </div>
        </div>
      </el-card>
      <vxe-grid
        ref="table"
        class="grid"
        border
        resizable
        highlight-hover-row
        :loading="tableLoading.table"
        :edit-config="{trigger: 'click', mode: 'row'}"
        :columns="columnsData"
        :data="tableData.table"
      />
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.rows"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.page"
        :total="pageInfo.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { listDataGroupByComegoPage as listData, getStatistics } from '@/api/finance/comego-rece-debt.js'
import Affix from '@/components/Affix'
import { getMoreButton } from '@/components/Table/oper-btns.js'
import Tab from '@/views/components/Tab'
import Total from './total.vue'
import CustomerCatTreeSelect from '@/views/components/CustomerCatTreeSelect'
import moment from 'moment'

export default {
  name: 'ComegoDebtReceList',
  filters: {
  },
  // eslint-disable-next-line vue/no-unused-components
  components: { Affix, CustomerCatTreeSelect, Total, Tab },
  mixins: [oftenuse],
  props: {},
  data() {
    return {
      searchData: {
        cat: '0',
        isShowNoDebt: '0',
        isShowDeactivate: '0'
      },
      statisticsData: {},
      currentIndex: 0,
      dialogVisible: false,
      columnsData: [
        { title: '操作', width: 60, fixed: 'left',
          slots: {
            default: (params) => {
              const { row } = params
              const h = this.$createElement
              const viewMoreNode = getMoreButton(h, { on: { click: () => { this.btnViewDetailData(row) } }})
              const divNode = h('div', {
                attrs: {
                  class: 'table-oper-btns'
                }
              }, [viewMoreNode])
              return [divNode]
            }
          }
        },
        { field: 'code', title: '客户编号', fixed: 'left', width: 150 },
        { field: 'name', title: '客户名称', fixed: 'left', width: 150 },
        { field: 'contacter', title: '联系人', width: 150 },
        { field: 'phone', title: '联系电话', width: 150 },
        { field: 'amountOriginDebt', title: '期初欠款', width: 150 },
        { field: 'amountDebt', title: '新增应收欠款', width: 150 },
        { field: 'amountRece', title: '收回欠款', width: 150 },
        { field: 'amountDiscount', title: '优惠额', width: 150 },
        // { field: '22', title: '抵消欠款', width: 150 },
        { field: 'amountShouldRece', title: '应收欠款', width: 150,
          slots: {
            default: ({ row }) => {
              const { amountOriginDebt, amountDebt, amountRece, amountDiscount } = row
              const value = this.$amount(amountOriginDebt).add(amountDebt)
                .subtract(amountRece).subtract(amountDiscount).format()
              return [<span>{value}</span>]
            },
            header: () => {
              return [
                <el-tooltip effect='dark' content='应收欠款 = 期初欠款 + 新增欠款 - 收回欠款 - 优惠额' placement='top-end'>
                  <span>应收欠款<i class='color-bule el-icon-question'/></span>
                </el-tooltip>
              ]
            }
          }
        }
      ]
    }
  },
  computed: {
    'billRange': function() {
      const { beginTime, endTime } = this.searchData
      if (!beginTime || !endTime) {
        const now = moment().format('YYYY-MM-DD')
        return `期初 - ${now}`
      }
      return `${beginTime} - ${endTime}`
    }
  },
  watch: {
    'searchData.cat': {
      handler(val) {
        this.listData()
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    btnAddData() {
      this.$router.push({
        name: 'ComegoDebtReceAdd'
      })
    },
    btnViewDetailData(row) {
      const { id, name } = row
      const comegoId = id
      const comegoName = name
      this.$router.push({
        name: 'ComegoDebtReceDetail',
        query: { comegoId, comegoName }
      })
    },
    btnSearchData() {
      this.setBtnLoading('search', true)
      this.listData().then(res => {
        this.setBtnLoading('search', false)
      }).catch(err => {
        console.log(err)
        this.setBtnLoading('search', false)
      })
    },
    // api
    initData() {
      this.listData()
      this.getStatistics()
    },
    listData(params = { data: this.searchData, page: this.pageInfo }) {
      this.setTableLoading('table', true)
      return new Promise((resolve, reject) => {
        listData(params).then(res => {
          this.setTableLoading('table', false)
          if (!res.data.flag) return
          const { records, total } = res.data.data
          this.setTableData('table', records)
          this.pageInfo.total = total
          resolve(res)
        }).catch(err => {
          this.setTableLoading('table', false)
          this.$notify.error({ title: '查询应收欠款异常！', message: err.message })
          reject(err)
        })
      })
    },
    getStatistics() {
      const params = this.searchData
      const total = this.$refs.total
      if (total) total.setLoading(true)
      getStatistics(params).then(res => {
        if (total) total.setLoading(false)
        if (res.data.flag) {
          const data = res.data.data
          if (data) this.statisticsData = data
        }
      })
    },
    // on
    onSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
      this.listData()
    },
    onCurrentChange(val) {
      this.pageInfo.current = val
      this.listData()
    },
    onTabDateChange(data) {
      const { beginTime, endTime } = data
      this.$set(this.searchData, 'beginTime', beginTime)
      this.$set(this.searchData, 'endTime', endTime)
    }
  }
}
</script>
<style lang="scss" scoped>
 .canuse-info{
     color: #636363;
     text-align: center;
     line-height: 26px;
     b { font-size: 24px;}
  }
</style>
